<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        /*header{
          background-color: #03A9F4;
          border: 0px;
         }
         header ul{
           border: 0px;
         }
        header ul li {
          height: 20px;
           line-height: 10px;
            text-align: center;
             display: none;
              color: #323237;
               position: relative;
               font-size: 18px;
               color: white;
               border: 0px;
               }
        header ul li.active{ display: block; }
        #footer{  background-color: #f2f2f2; }
        #footer ul li{  padding-top: 36px; padding-bottom: 4px; background: url() no-repeat center 2px; background-size: auto 30px; text-align: center; }
        #footer ul li.active{ color: #6ab494; }
        #footer ul li:nth-child(1){ background-image: url(./image/bottombtn0101.png); }
        #footer ul li:nth-child(2){ background-image: url(./image/bottombtn0201.png); }
        #footer ul li:nth-child(3){ background-image: url(./image/bottombtn0301.png); }
        #footer ul li:nth-child(4){ background-image: url(./image/bottombtn0401.png); }
        #footer ul li:nth-child(1).active{ background-image: url(./image/bottombtn0102.png); }
        #footer ul li:nth-child(2).active{ background-image: url(./image/bottombtn0202.png); }
        #footer ul li:nth-child(3).active{ background-image: url(./image/bottombtn0302.png); }
        #footer ul li:nth-child(4).active{ background-image: url(./image/bottombtn0402.png); }
        .flex-con{
          overflow: auto*/
        /*}*/


    </style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">
    <header>
        <ul>
            <li class="border-b active" >
                <a class="menu" tapmode="" onclick="sliding()"></a>
              云API
            </li>
            <li class="border-b" >端API</li>
            <li class="border-b" >开发</li>
            <li class="border-b" >文档</li>
        </ul>
    </header>
    <div id="main" class="flex-con">

    </div>
    <div id="footer" class="border-t">
        <ul class="flex-wrap" >
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active" >

              临检信息
            </li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >端API</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >开发</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >文档</li>
        </ul>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript">
    // apiready = function () {
    //     $api.fixStatusBar( $api.dom('header') );
    //     api.setStatusBarStyle({
    //         style: 'dark',
    //         color: '#6ab494'
    //     });
    //     funIniGroup();
    // }
    //
    // function funIniGroup(){
    //     var eHeaderLis = $api.domAll('header li'),
    //         frames = [];
    //     for (var i = 0,len = eHeaderLis.length; i < len; i++) {
    //             frames.push( {
    //                 name: 'frame'+i,
    //                 url: './html/frame'+i+'.html',
    //                 bgColor : 'rgba(0,0,0,.2)',
    //                 bounces:true
    //             } )
    //     }
    //     api.openFrameGroup({
    //         name: 'group',
    //         scrollEnabled: false,
    //         rect: {
    //             x: 0,
    //             y: $api.dom('header').offsetHeight,
    //             w: api.winWidth,
    //             h: $api.dom('#main').offsetHeight
    //         },
    //         index: 0,
    //         frames: frames
    //     }, function (ret, err) {
    //
    //     });
    // }
    //
    //
    //
    // // 随意切换按钮
    // function randomSwitchBtn( tag ) {
    //     if( tag == $api.dom('#footer li.active') )return;
    //     var eFootLis = $api.domAll('#footer li'),
    //         eHeaderLis = $api.domAll('header li'),
    //         index = 0;
    //     for (var i = 0,len = eFootLis.length; i < len; i++) {
    //         if( tag == eFootLis[i] ){
    //             index = i;
    //         }else{
    //             $api.removeCls(eFootLis[i], 'active');
    //             $api.removeCls(eHeaderLis[i], 'active');
    //         }
    //     }
    //     $api.addCls( eFootLis[index], 'active');
    //     $api.addCls( eHeaderLis[index], 'active');
    //     api.setFrameGroupIndex({
    //         name: 'group',
    //         index: index
    //     });
    // }

</script>
<script type="text/javascript" src="script/init.js"></script>
